<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级感圆形倒计时</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #0f0f13;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }
        
        .timer-container {
            position: relative;
            width: 220px;
            height: 220px;
        }
        
        .progress-ring {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        
        .progress-fill {
            fill: none;
            stroke: url(#gradient);
            stroke-width: 4;
            stroke-linecap: round;
            stroke-dasharray: 628;
            stroke-dashoffset: 0;
            filter: drop-shadow(0 0 4px rgba(100, 220, 255, 0.5));
        }
        
        .timer-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: rgba(20, 20, 25, 0.9);
            box-shadow: 
                0 8px 20px rgba(0, 0, 0, 0.4),
                inset 0 2px 6px rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.95);
            font-size: 42px;
            font-weight: 300;
            letter-spacing: -1px;
            transition: all 0.3s ease;
        }
        
        .timer-button:hover {
            background: rgba(25, 25, 32, 0.95);
            box-shadow: 
                0 10px 25px rgba(0, 0, 0, 0.5),
                inset 0 2px 8px rgba(255, 255, 255, 0.08);
        }
        
        .timer-button:active {
            transform: translate(-50%, -50%) scale(0.98);
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <svg class="progress-ring" viewBox="0 0 220 220">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" stop-color="#00d9ff" />
                    <stop offset="50%" stop-color="#7a5fff" />
                    <stop offset="100%" stop-color="#ff2df7" />
                </linearGradient>
            </defs>
            <circle class="progress-fill" cx="110" cy="110" r="100" />
        </svg>
        <div class="timer-button" id="timer">60</div>
    </div>

    <script>
        let count = 60;
        let isRunning = true;
        let timer = null;
        let startTime = null;
        let remainingTime = 60;
        const radius = 100;
        const circumference = 2 * Math.PI * radius;
        const progressFill = document.querySelector('.progress-fill');
        const timerElement = document.getElementById('timer');
        
        // 初始设置：完整边框
        progressFill.style.strokeDasharray = circumference;
        progressFill.style.strokeDashoffset = 0;
        
        function startTimer() {
            if (timer) cancelAnimationFrame(timer);
            startTime = Date.now();
            remainingTime = count;
            
            function animate() {
                const elapsed = (Date.now() - startTime) / 1000;
                const currentCount = remainingTime - elapsed;
                
                if (currentCount <= 0) {
                    count = 0;
                    updateDisplay(0);
                    resetTimer();
                    return;
                }
                
                updateDisplay(currentCount);
                timer = requestAnimationFrame(animate);
            }
            
            timer = requestAnimationFrame(animate);
        }
        
        function updateDisplay(currentCount) {
            timerElement.textContent = Math.ceil(currentCount);
            // 计算进度：从完整边框逐渐减少到0
            const progress = currentCount / 60;
            const offset = circumference - (progress * circumference);
            progressFill.style.strokeDashoffset = offset;
        }
        
        function toggleTimer() {
            if (count > 0) {
                if (isRunning) {
                    cancelAnimationFrame(timer);
                    timer = null;
                    count = remainingTime - (Date.now() - startTime) / 1000;
                } else {
                    startTimer();
                }
                isRunning = !isRunning;
            }
        }
        
        function resetTimer() {
            if (timer) cancelAnimationFrame(timer);
            count = 60;
            isRunning = true;
            startTimer();
        }
        
        function handleLongPress() {
            let pressTimer = setTimeout(() => {
                resetTimer();
            }, 500);
            
            const cancelLongPress = () => {
                clearTimeout(pressTimer);
                timerElement.removeEventListener('mouseup', cancelLongPress);
                timerElement.removeEventListener('mouseleave', cancelLongPress);
                timerElement.removeEventListener('touchend', cancelLongPress);
            };
            
            timerElement.addEventListener('mouseup', cancelLongPress);
            timerElement.addEventListener('mouseleave', cancelLongPress);
            timerElement.addEventListener('touchend', cancelLongPress);
        }
        
        timerElement.addEventListener('click', toggleTimer);
        timerElement.addEventListener('mousedown', handleLongPress);
        timerElement.addEventListener('touchstart', handleLongPress);
        
        startTimer();
    </script>
</body>
</html>